<template>
  <div class="userlist">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" :form="form">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="归属地市：">
              <a-input placeholder="请输入" v-model="form.opCode" allowClear class="custom-input"></a-input> </a-form-item></a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="订单渠道：">
              <a-input placeholder="请输入" v-model="form.opCode" allowClear></a-input> </a-form-item></a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="渠道名称：">
              <a-input placeholder="请输入" v-model="form.opCode" allowClear></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="选择号码：">
              <a-input placeholder="请输入" v-model="form.accessNum" allowClear></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="员工工号：">
              <a-input placeholder="请输入" v-model="form.opCode" allowClear></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="开户时间：">
              <a-input placeholder="请输入" v-model="form.opCode" allowClear></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <a-form-item label="是否风险：">
              <a-select v-model="form.izRisk" placeholder="请选择" allowClear style="width:202px;">
                <a-select-option value="1">是</a-select-option>
                <a-select-option value="0">否</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button class="custom-primary-button" @click="handleSearch" icon="search">查询</a-button>
              <a-button icon="reload" @click="handleReset" class="ml8">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
      <div class="table-operator" v-has="'auditingtask:usergeneratetask'">
      <a-tabs default-active-key="1" @change="callback" >
        <a-tab-pane key="1" tab="日" class="custom-tab-pane">
        </a-tab-pane>
        <a-tab-pane key="2" tab="月" force-render class="custom-tab-pane">
        </a-tab-pane>
        <a-tab-pane key="3" tab="年" class="custom-tab-pane">
        </a-tab-pane>
      </a-tabs>
    </div>
    </div>
    <!-- 操作按钮区域 -->
    <!-- 折线图 -->
    <div class="echarts-wrapper">
       <LineChart
      :xAxisData="xAxisData2"
      :seriesData="seriesData2"
      title="页面 2 的折线图"
      seriesName="访问量"
      :options="options"
    />
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <a-table :columns="columns" :row-key="(record) => record.id" :data-source="data" :loading="loading"
        :pagination="false" class="atable">
        <!-- 状态 -->
        <template slot="state_dictText" slot-scope="text, record">
          <div class="status">
            <div :class="'agentStatus' + record.state">{{ text }}</div>
          </div>
        </template>
        <!-- 操作 -->
        <span slot="action" slot-scope="text, record">
          <a @click="handleDetail(record)">查看详情</a>
        </span>
      </a-table>
      <a-pagination class="pagination" v-model="pagination.current" :page-size-options="pagination.pageSizeOptions"
        :total="pagination.total" show-size-changer :page-size="pagination.pageSize" @change="onChange"
        @showSizeChange="onShowSizeChange">
        <template slot="buildOptionText" slot-scope="props">
          <span>{{ props.value }}条/页</span>
        </template>
      </a-pagination>
    </div>

  </div>
</template>
<script>
// import { taskInfolist, taskInfoqueryById, checkValidity} from '@/api/audit'
import LineChart from '@/components/LineChart.vue';
const columns = [
  {
    title: '名称',
    dataIndex: 'izRisk',
    scopedSlots: { customRender: 'izRisk' },
  },
  {
    title: '归属地市',
    dataIndex: 'regionId_dictText',
  },
  {
    title: '订单渠道',
    dataIndex: 'channelCode_dictText',
  },
  {
    title: '渠道名称',
    dataIndex: 'orgCode_dictText',
  },
  {
    title: '选择号码',
    dataIndex: 'accessNum',
  },
  {
    title: '员工工号',
    dataIndex: 'opCode',
  },
  {
    title: '开户时间',
    dataIndex: 'openDate',
  },
  {
    title: '稽核状态',
    dataIndex: 'state_dictText',
    scopedSlots: { customRender: 'state_dictText' },
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
  },
]
import { queryGoodsList } from '@/api/menu'
export default {
  data() {
    return {
      // 页面 1 的数据
      xAxisData1: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      seriesData1: [120, 200, 150, 80, 70, 110, 130],
      // 页面 2 的数据
      xAxisData2: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
      seriesData2: [300, 280, 250, 260, 270, 320, 310],
      majorFileList: [],
      queryAreaByPiddata: [],
      data: [], //列表数据
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
      }, //分页配置
      loading: false, //loading加载
      columns, //表格配置
      datetime: '',
      form: {
        regionId: '',
        channelCode: '',
        orgCode: '',
        accessNum: '',
        opCode: '',
        openDate: [],
        state: '',
        auditBy: '',
        auditTimeS: '',
        bgDate: '',
        endDate: '',
        izRisk: '',
      },
       options: {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          borderColor: '#333',
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        legend: {
          left: 'right', // 添加此行，将图例居左显示
          top: 'top',
          textStyle: {
            color: '#666',
            fontSize: 12
          },
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 20
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data:  ['20250205', '20250206', '20250207', '20250208', '20250209', '20250210', '20250211'],
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#666',
            fontSize: 12
          }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 0.05,
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#666',
            fontSize: 12,
            formatter: function (value) {
              return value + 'k';
            }
          },
          splitLine: {
            lineStyle: {
              color: '#e0e0e0',
              type: 'dashed'
            }
          }
        },
        series: [
          {
            name: '开机用户数',
            type: 'line',
            data: [0.04, 0.03, 0.02, 0.01, 0.02, 0.03, 0.04],
            symbol: 'none',
            lineStyle: {
              color: '#f87979',
              width: 2
            }
          },
          {
            name: '点播用户数',
            type: 'line',
            data: [0.03, 0.02, 0.01, 0.02, 0.03, 0.04, 0.03],
            symbol: 'none',
            lineStyle: {
              color: '#79aaf8',
              width: 2
            }
          },
          {
            name: '直播用户数',
            type: 'line',
            data: [0.04, 0.03, 0.02, 0.01, 0.02, 0.03, 0.04],
            symbol: 'none',
            lineStyle: {
              color: '#79f87e',
              width: 2
            }
          },
          {
            name: '回放用户数',
            type: 'line',
            data: [0.04, 0.03, 0.02, 0.01, 0.02, 0.03, 0.04],
            symbol: 'none',
            lineStyle: {
              color: '#f8f879',
              width: 2
            }
          }
        ]
      }
    }
  },
  components: {
    LineChart
  },
  mounted() {
    this.getdata()
    // 开发环境不做限制
  },
  methods: {
    async getdata() {
      this.data= [
        {
          izRisk:'测试'
        },
        {
          izRisk:'测试'
        }
      ]
      // this.loading = true
      // let { current, pageSize } = this.pagination
      // const res = await queryGoodsList({
      //   pageNo: current,
      //   pageSize,
      //   ...this.form,
      // })
      // let code = res.code
      // if (code === 200) {
      //   let data = res.result
      //   this.loading = false
      //   this.data = data.records
      //   this.pagination.total = data.total
      // } else {
      //   this.$message.warning(res.message)
      //   this.loading = false
      // }
    },
    // 查询数据
    handleSearch() {
      this.loading = true
      this.pagination.current = 1
      // this.getdata()
    },
    // 导出数据
    async handleExportdata(data) {
      let state = await this.handlecheckValidity()
      if (state === 2) {
        return
      }
      this.$refs.exportdata.init(data, this.form)
    },
    // 生成抽查任务
    async handleGeneratetask(data) {
      let state = await this.handlecheckValidity()
      if (state === 2) {
        return
      }
      this.$refs.generatetask.init(data)
    },
    // 校验时间
    datechange(value) {
      this.form.bgDate = value.length > 0 ? value[0] : ''
      this.form.endDate = value.length > 0 ? value[1] : ''
    },
    // 重置查询数据
    handleReset() {
      this.pagination.current = 1
      this.datetime = ''
      this.form = {
        regionId: '',
        channelCode: '',
        orgCode: '',
        accessNum: '',
        opCode: '',
        openDate: [],
        state: '',
        auditBy: '',
        auditTimeS: '',
        bgDate: '',
        endDate: '',
        izRisk: '',
      }
    },
    // 切换页数
    onChange(current) {
      this.pagination.current = current
      this.getdata()
    },
    // 切换每页显示多少条
    onShowSizeChange(current, pageSize) {
      this.pagination.pageSize = pageSize
      this.pagination.current = current
      this.getdata()
    },
  },
}
</script>

<style lang="scss" scoped>
.userlist {
  width: 100%;
  height: auto;
 
}

.status {

  .agentStatus1,
  .agentStatus2 {
    color: #ff4d4fff;
  }

  .agentStatus3 {
    color: #faad14;
  }

  .agentStatus4,
  .agentStatus5 {
    color: #52c41a;
  }

  .agentStatus8 {
    color: #bfbfbfff;
  }
}




.warning {
  width: 24px;
  height: 24px;
}


// 状态原点</style>